Above : Shows the Product Detail page at "Normal State".
Below : Shows the Product Detail page at "Clicked State" (momentarily).
Micro interactions should help the user understand what is happening while visiting the product. Here if you click on "Add to Cart" a small menu bar slides up alerting the user an action has occurred (in this case the item has been added to the cart). It also gives the user an option to Undo, and quickly take the item out of the cart (without having to navigate to the cart later, and manually remove an item)
A secondary micro interaction animates the cart icon, increasing the number of items in the cart. A preview window of the items within the cart, and totals are momentarily displayed.
This preview window will change in appearance depending on how many items are in the cart at any given time.
Above : Shows the Shopping Cart page in its "Normal State".
Below : Shows the Checkout Process from the Shopping Cart through the Checkout.
